<!--
 * @Description:  courseOutlineTest - 课程大纲/查看习题
 * @Author: your name
 * @Date: 2024-02-28
 * @LastEditTime: 2024-02-28
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/newzhike' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课后练习</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="wrapper">
      <div v-for="(item, index) in 1" :key="'testlist' + index">
        <div class="testBox" v-if="isnow == index">
          <div class="top">
            <h5>{{ index + 1 }}.[单项选择题]</h5>
            <div class="operations">
              <div @click="wd_show = true">
                <img src="@/assets/images/ask1.png" alt="" />
                <span>提问</span>
              </div>
              <div @click="correct_err_show = true">
                <img src="@/assets/images/errorCor1.png" alt="" />
                <span>纠错</span>
              </div>
            </div>
          </div>
          <!-- <div class="testTit" v-html="item.title"></div> -->
          <div class="testTit">v-html="item.title"</div>
          <div>
            <div
              class="options"
              v-for="(option, indexnum) in 4"
              :key="'option' + indexnum"
            >
              <div
                class="optionBox"
                :class="{ activeCss: choseindex == indexnum }"
                @click="choseanswer(indexnum, index, option.option)"
                v-if="!item.user_answer"
              >
                <div class="option">{{ oplist[indexnum] }}</div>
                <div class="optionText">213</div>
              </div>
            </div>
          </div>
          <div class="openAnalysis">
            <div class="btn" @click="scranAnalysis()">查看解析</div>
            <div class="btn" @click="tonext(index + 1)">下一题</div>
          </div>
          <div
            class="analysisBox"
            style="background: #fff"
            v-show="!anaShow || item.user_answer"
          >
            <div class="yourAns">
              正确答案：<span>A</span> &nbsp;&nbsp;您的答案：<span>C</span>
            </div>
            <div class="center">
              <span class="tit">题目统计：</span>本题<span>&nbsp;12人 </span
              >做过， 平均正确率<span> &nbsp;{{ 0.2 * 100 }}% </span
              >，易错选项<span> &nbsp;B </span>
            </div>
            <div v-if="item.vod_analysis && item.vod_analysis != ''">
              <span class="tit">视频解析：</span>
              <div
                class="video"
                style="width: 530px; height: 100%; background: #e0e0e0"
              >
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @playing="onPlayerPlaying($event)"
                  @ended="onPlayerEnded($event)"
                >
                </video-player>
              </div>
            </div>
            <div v-if="!item.analysis">
              <span class="tit">答案解析：</span>
              <p style="width: 690px" v-html="item.analysis"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="top" style="height: 30px">
          <div class="progressBox_t">
            <span>进度:</span>
            <el-progress
              :percentage="Number(2) * 100"
              style="width: 125px"
              :stroke-width="10"
              color="#00af63"
              :show-text="false"
            >
            </el-progress>
            <span>2/3题</span>
          </div>
        </div>
        <div class="tiList">
          <div class="tit">答题卡</div>
          <div class="listBox">
            <div class="testSitu">
              <p>已答</p>
              <p>未答</p>
            </div>
            <div class="navs">
              <p class="act">【单选题】</p>
            </div>
            <div class="list">
              <span
                :class="{ nodo: item.user_answer !== '' }"
                v-for="(item, index) in 12"
                @click="cardto(index)"
                :key="index"
              >
                {{ index + 1 }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button
              class="my_ans"
              style="background-color: #eb0808"
              @click="get_ask(1, 0)"
            >
              我的提问
            </button>
            <button
              class="other_ans"
              style="background-color: #fdaf42"
              @click="get_ask(0, 0)"
            >
              全部问答
            </button>
          </div>
          <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div>
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio size="medium" label="0">答案错误</el-radio>
                <el-radio size="medium" label="1">功能问题</el-radio>
                <el-radio size="medium" label="2">错误解析</el-radio>
                <el-radio size="medium" label="3">判分错误</el-radio>
                <el-radio size="medium" label="4">排版错误</el-radio>
                <el-radio size="medium" label="5">其他</el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
            <div class="concat">
              联系方式：
              <input
                placeholder="您的手机号"
                type="text"
                v-model="error_form.your_phone"
              />
            </div>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err()">确定</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'courseOutlineTest',
  data() {
    return {
      error_form: {
        err_choose: '0', // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      filelist: [], // 文件上传列表
      ask_list: [], // 问答列表
      ask_show: false,
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      correct_err_show: false,
      wd_show: false,
      donum: 0,
      anaShow: false,
      testlist: [],
      isnow: 0, // 当前题目的角标
      choseindex: -1, //选中答案的 角标
      oplist: ['A', 'B', 'C', 'D', 'E'] //选项序号 循环数组
    }
  },
  created() {},
  methods: {
    close_wd() {
      this.wd_show = false
    },
    submit_wd() {},
    get_ask() {},
    submit_err() {},
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    imgPreview(file) {
      console.log(file, '888888888')
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    upload_img(res) {
      console.log(res, '22222222')
      this.filelist.push(res.file)
    },
    handleExceed() {
      this.$message({
        message: '最多上传三张图片！',
        type: 'warning',
        offset: 80
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/courseOutlineTest.scss';
</style>
